import PropTypes from 'prop-types'
import React, { Fragment, memo, useEffect, useState } from 'react'
import { CSSTransition, SwitchTransition } from 'react-transition-group'
import { BrowserWrapper } from './style'
import IconClose from '@/assets/svg/icon_close'
import IconArrowLeft from '@/assets/svg/icon_arrow_left'
import IconArrowRight from '@/assets/svg/icon_arrow_right'
import IconToggleArrowBottom from '@/assets/svg/icon_toggle_arrow_bottom'
import IconToggleArrowTop from '@/assets/svg/icon_toggle_arrow_top'
import Indicator from '@/base-ui/indicator'
import classNames from 'classnames'

const PictureBrowser = memo((props) => {
  const { pictureUrls, closeClick } = props
  const [curIndex, setCurrentIndex] = useState(0)
  const [isNext, setIsNext] = useState(true)
  const [isShowList, setIsShowList] = useState(true)

  useEffect(() => {
    document.body.style.overflow = 'hidden'
    return () => {
      document.body.style.overflow = 'auto'
    }
  })

  function controlClickHandle (isRight) {
    let newIndex = isRight ? curIndex + 1 : curIndex - 1
    if (newIndex < 0) newIndex = pictureUrls.length - 1
    else if (newIndex > pictureUrls.length - 1) newIndex = 0
    setCurrentIndex(newIndex)
    setIsNext(isRight)
  }

  function toggleClickHandle () {
    setIsShowList(!isShowList)
  }

  function itemClickHandle (index) {
    setIsNext(index > curIndex)
    setCurrentIndex(index)
  }

  return (
    <BrowserWrapper isNext={isNext} isShowList={isShowList}>
      <div className="top">
        <div className="closeBtn" onClick={closeClick}>
          <IconClose />
        </div>
      </div>
      {/* 照片切换 */}
      <div className="slide">
        <div className="control">
          <div className="btn left" onClick={e => controlClickHandle(false)}>
            <IconArrowLeft width="77" height="77" />
          </div>
          <div className="btn right" onClick={e => controlClickHandle(true)}>
            <IconArrowRight width="77" height="77" />
          </div>
        </div>
        <div className="picture">
          <SwitchTransition mode="in-out">
            <CSSTransition
              key={pictureUrls[curIndex]}
              classNames="pic"
              timeout={200}
            >
              <img src={pictureUrls[curIndex]} alt="" />
            </CSSTransition>
          </SwitchTransition>
        </div>
      </div>
      {/* 照片预览列表 */}
      <div className="preview">
        <div className="content">
          <div className="desc">
            <div className="count">
              <span>{curIndex} / {pictureUrls.length}</span>
              <span>room picture {curIndex}</span>
            </div>
            <div className="toggle" onClick={toggleClickHandle}>
              {isShowList ? (
                <Fragment>
                  <span>隐藏照片列表</span>
                  <IconToggleArrowBottom />
                </Fragment>
              ) : (
                <Fragment>
                  <span>显示照片列表</span>
                  <IconToggleArrowTop />
                </Fragment>
              )}
            </div>
          </div>
          <div className="pic-list">
            <Indicator curIndex={curIndex}>
              {
                pictureUrls.map((item, index) => {
                  return (
                    <div
                      key={index}
                      className={classNames("item", { "active": curIndex === index })}
                      onClick={e => itemClickHandle(index)}
                    >
                      <img src={item} alt="" />
                    </div>
                  )
                })
              }
            </Indicator>
          </div>
        </div>
      </div>
    </BrowserWrapper>
  )
})

PictureBrowser.propTypes = {
  pictureUrls: PropTypes.array
}

export default PictureBrowser